import React from 'react'
import { Table,Button,Input } from 'antd';
import StateMixin from 'reflux-state-mixin';
import SrvItemStore from 'pages/serviceitems/stores/serviceItemStore.js';
import SrvItemAction from 'pages/serviceitems/actions/serviceItemAction.js'	

export default React.createClass({
  mixins: [StateMixin.connect(SrvItemStore)],
  getInitialState() {
    return {
      pagination: {},
      loading: false,
      selectedRows:[],
      keyword: null
    };
  },

  handleOk() {
    this.props.onOk(this.state.selectedRows);
  },
  handleCancel() {
    this.props.onCancel()
  },
  componentDidMount() {
    this.getSrvItemList(1,null);
  },
  getSrvItemList(pageNumParam,key) {
    // console.log('key:'+key+',pageNum:'+pageNumParam)
    SrvItemAction.getSrvItemList({
      current: pageNumParam,
      keyword: key
    });
  },
  getSrvItemByKwd(event) {
    const val = event.target.value;
    this.setState({
      keyword: val,
      pagination: {current:1}
    });
    this.getSrvItemList(1, val);
  },
  render() {
    const columns = [{
      title: '服务项名称',
      dataIndex: 'name',
      key: 'name'
    }, {
      title: '描述',
      dataIndex: 'description',
      key: 'description'
    }, {
      title: '标签',
      dataIndex: 'tags',
      key: 'tagse'
    }
    ];

    // const data = [];
    // for (let i = 0; i < 5; i++) {
    //   data.push({
    //     id: i,
    //     name: `创建电子邮箱 ${i}`,
    //     description: '创建哈哈哈哈哈哈',
    //     tag:'技术支持'
    //   });
    // }


// rowSelection object indicates the need for row selection
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRows: selectedRows
        })
      },

      onSelectAll: (selected, selectedRows) => {
        this.setState({
          selectedRows: selectedRows
        })
      },
      getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User',    // Column configuration not to be checked
      }),
    };
    return (
          <div className="choose-modal">
            <h3>服务项选择</h3>
            <div className="choose-field">
                <div className="serviceitems_top">
                <Input className="search" id="search" placeholder="请输入关键字"  onChange={ this.getSrvItemByKwd }/>
                </div>
              <Table rowKey="id" pagination={this.state.pagination} rowSelection={rowSelection} 
              columns={columns} dataSource={this.state.items} />
            </div>
            <div className="footer">
              <Button onClick={this.handleOk} type="primary">保存</Button>
              <Button onClick={this.handleCancel} type="primary">取消</Button>
        </div>
          </div>
    );
  }
});
